<template>
  <blogHeader></blogHeader>

  <!-- 主内容区域 -->
  <main class="container main_min_height max-w-[1200px] mx-auto p-4">
    <div class="grid grid-cols-10 gap-8">

      <!-- 左边栏 -->
      <div class="sm:col-span-7 col-span-10 mb-3 bg-white rounded-lg">
        <!-- HEADER -->
        <h2 class="blog-font-cute text-2xl font-bold mt-6 pl-4 text-gray-800 dark:text-white">分类</h2>
        <ul class="ml-1 pb-4 pt-2">
          <li v-for="(item, index) in categories" :key="item.id"
            @click="goCategoryArticleListPage(item.id, item.name)"
            class=" transition duration-300  hover:bg-gray-100 cursor-pointer flex items-center py-1 mx-6 my-2 rounded-lg border-b">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="size-4 mr-2">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
            </svg>
            <span class="blog-font-cute">{{ item.name }}</span>
          </li>
        </ul>
      </div>


      <!-- 右边侧边栏 -->
      <aside class="col-span-3 hidden sm:block">
        <!-- 博主信息 -->
        <AuthorInfoCard></AuthorInfoCard>
        <!-- 标签 -->
        <TagCloudCard></TagCloudCard>

      </aside>
    </div>

  </main>
  <div class="hidden md:block sticky bottom-0 right-0 w-full">
        <div class="absolute right-0 bottom-0">
            <live2d></live2d>
        </div>
    </div>
  <indexFooter></indexFooter>


</template>

<script setup>
import { onMounted, ref } from 'vue'
import blogHeader from '@/composition/frontend/component/Header.vue'
import AuthorInfoCard from '@/composition/frontend/component/AuthorInfoCard.vue';
import TagCloudCard from '@/composition/frontend/component/TagCloudCard.vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import live2d from '@/components/live2d.vue';
import { getCategories } from '@/api/frontend/category';
import { useRouter } from 'vue-router';

// 根据分类跳转分类文章页并显示
const router = useRouter()
const goCategoryArticleListPage = (id, name)=>{
  router.push({
    path: '/category/article/list',
    query:{
      id,
      name
    }
  })
}



//分类列表
const categories = ref([])

onMounted(() => {
  getCategories().then((res)=>{
    if(!res.success){
      showMessage(res.message,'error')
      return
    }
    categories.value = res.data
  })
})



</script>

<style scoped></style>